<template>
    <el-form 
    :inline="true" 
    :model="formInline" 
    label-width="60px"
    size="small"
    style="margin-top:10px;"
    >
        <template v-for="(item,index) in filters">
            <template v-if="item.is_search == 1">
                <el-form-item :label="item.title" v-if="item.filter_type == 'text'">
                    <el-input v-model="dataMap.formData[index]"  :placeholder="'请输入'+item.title" clearable />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'select'">
                    <el-select clearable filterable v-model="dataMap.formData[index]" :placeholder="'请输入'+item.title">
                        <el-option v-for="(value,index) in item.listData" :label="value[item.list_data.dropdownValue]" :value="value[item.list_data.dropdownKey]" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'multi_select'">
                    <el-select clearable multiple filterable v-model="dataMap.formData[index]" :placeholder="'请输入'+item.title">
                        <el-option v-for="(value,index) in item.listData" :label="value[item.list_data.dropdownValue]" :value="value[item.list_data.dropdownKey]" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'checkbox'">
                    <el-checkbox-group v-model="dataMap.formData[index]">
                        <el-checkbox v-for="(value,key) in item.listData" :label="key">{{value}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'date'">
                    <el-date-picker
                        v-model="dataMap.formData[index]"
                        type="datetime"
                        placeholder="请选择时间"
                        :shortcuts="shortcuts"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'date_range'">
                    <el-date-picker
                        v-model="dataMap.formData[index]"
                        type="datetimerange"
                        range-separator="To"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'number'">
                    <el-input v-model="dataMap.formData[index]"  :placeholder="'请输入'+item.title" clearable />
                </el-form-item>
                <el-form-item :label="item.title" v-if="item.filter_type == 'number_range'">
                    <el-input style="width: 100px" v-model="dataMap.formData[index+'_start']"  placeholder="最小" />
                    <span style="margin-left:4px;margin-right:4px;">To</span>
                    <el-input style="width: 100px" v-model="dataMap.formData[index+'_end']"  placeholder="最大" />
                </el-form-item>
            </template>
        </template>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {reactive,watch} from 'vue'
import httpTool from '../httpRequest'

let dataMap = reactive({
    formData:{},
});
const props = defineProps({
    filters:{
      type:Array,
      default:()=>{
        return [];
      }
    },
    pageParams:{
        type:Array,
        default:()=>{
            return [];
        }
    },
    searchUrl:{
        type:String,
        default:()=>{
            return '';
        }
    }
})
for(let k in props.filters){
    if(props.filters[k].is_search == 1){
        switch(props.filters[k].filter_type){
            case 'text' : case 'select' : case 'number' : case 'date' : case 'multi_select' : dataMap.formData[k] = ''; break;
            case 'date_range' : dataMap.formData[k] = []; break;
            case 'number_range' :  dataMap.formData[k+'_start'] = '',dataMap.formData[k+'_end'] = '';; break;
        }
    }
}
const emit = defineEmits(['getTableData']);
//提交查询
let doSearch = ()=>{
    httpTool.post(props.searchUrl,dataMap.formData).then(response=>{
        emit('getTableData',response.data.listData)
    }).catch(error=>{

    })
}
let onSubmit = ()=>{
    doSearch();
}
//监听分页信息
watch([()=>props.pageParams],(newVal)=>{
    let pagination = newVal[0];
    for(let k in pagination){
        dataMap.formData[k] = pagination[k];
    }
    doSearch();
},{deep: true})

</script>

<style lang="scss">
</style>